<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="./js/react.development.js"></script>
   <script src="./js/react-dom.development.js"></script>
   <script src="./js/babel.min.js"></script>


    <script type="text/babel">
        // 01 immutable 不可改变的； react 元素是不可改变的对象；
        // 快照
        // var e = 
        //     <div>
        //         <h1>Clock</h1>
        //         <h3>time:{new Date().toLocaleTimeString()}</h3>
        //     </div>

        // ReactDOM.render(e,document.getElementById('app'))
       
        // 02 ： 需求 每个一秒 显示最新时间
        function tick (){
            //创建新的时间元素 
            var e = 
                <div>
                    <h1>Clock</h1>
                    <h3>time:{new Date().toLocaleTimeString()}</h3>
                </div>
            console.log(e);
           
            // e1 e2 =>js 对象1 ， js对象2 => 虚拟DOM 比较
            
            // 更新变化部分=》减少重回面积 =优化性能

            //同步元素到容器
            ReactDOM.render(e,document.getElementById('app'))
        }

        // tick()
        
        // 注意 ： 内存溢出
        setInterval(tick, 1000);

    </script>
</body>
</html>